<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog title="选择区域" :visible.sync="open" width="600px" append-to-body @close="cancel">
      <div :style="treeStyle" class="tree-list">
        <el-tree :data="dataList" node-key="id" ref="tree" show-checkbox :props="props" expand-on-click-node />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ok">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </lam-dialog>

</template>

<script>
export default {
  name: "EditTransCity",
  data() {
    return {
      open: false,
      dataList:[],
      checkedKeys:[],
      props: {
        id: 'id',
        label: 'areaName',
        children: 'children'
      },
      treeStyle:{
        overflow: 'auto',
        height: '500px'
      },
      url: {
      	list: '/mall/area/list'
      },
      rowIndex: null,
      type: null,
    };
  },
  created() {
  },
  methods: {
    loadTreeData(){
      this.loading = true;
      this.$httpGet(this.url.list).then(res=>{
          this.dataList = res.data.records;
          this.$refs.tree.setCheckedKeys(this.checkedKeys)
      }).finally((res)=>{
        this.loading = false;
      });
    },

    /** 确定按钮 */
    ok(){
      let nodes = this.$refs.tree.getCheckedNodes();
      this.$emit('ok', nodes, this.rowIndex, this.type);
      this.cancel()
    },

    openDialog(selectCityIds, rowIndex, type){
      this.rowIndex = rowIndex;
      this.type = type;
      this.checkedKeys = selectCityIds;
      this.loadTreeData();
      this.open = true;
    },
    cancel(){
      this.rowIndex = null;
      this.type = null;
      this.checkedKeys = [];
      this.$refs.tree.setCheckedKeys([])
      this.open = false;
    },


  }
};
</script>

<style scoped>
  .tree-list{
    width: 100%;
    overflow: auto;
    border: 1px black solid;
    border-radius: 8px;
  }
</style>
